{% extends 'base.html' %}
{% block css %}
    {% load static %}
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/cl-css.css' %}" rel="stylesheet">
    <link href="{% static 'font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'highlight/styles/railscasts.css' %}">
{% endblock %}
{% block title %}
    {% for i in tit %}
        {% if info.id == i.id %}
            <li class="nav-item active">
                <a class="nav-link" href="{% url 'home:index' %}?cid={{ i.id }}">{{ i.title }}</a>
            </li>
        {% else %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'home:index' %}?cid={{ i.id }}">{{ i.title }}</a>
            </li>
        {% endif %}
    {% endfor %}


{% endblock %}
{% block content %}
    <div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">

            <div class="cl-artical-content">
                <h2 class="cl-artical-title">{{ art.title }}</h2>
                <div class="cl-card-tag">
                    <div><span>{{ art.total_views }}</span>人浏览 / <span>{{ art.comments_count }}</span>人评论</div>
                </div>
                <div class="cl-artical">
                    <p>{{ art.content | safe }}</p>

                </div>
            </div>
            <div class="recommend-panel">
                <h4 class="right-card-title">相关文章</h4>
                <div class="card-deck">
                    {% for l in list %}
                        <div class="card ll-panel">
                            <a class="recommend-panel-link" href="?art_id={{ l.id }}">
                                <div class="recommend-panel-top">
                                    <img src="{{ l.avatar.url }}" class="img-fluid" alt="">
                                </div>
                                <div class="recommend-panel-bottom">
                                {{ l.title }}
                            </div>

                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="comment">


                <form class="cl-comment-from" method="post">
        {% csrf_token %}
        <input type="hidden" value="{{ art.id }}" name="id">
        <div><textarea placeholder="说点什么吧..." rows="1" name="content"></textarea></div>
        <button type="submit">留言</button>
        <span class="clearfix"></span>
    </form>
    <h4 class="right-card-title">全部评论</h4>
    {% for p in pp %}
        <div class="comment-panel">
            <div class="comment-panel-portrait">
                <img src="{{ p.user.avatar.url }}" class="img-fluid rounded-circle" alt="">
            </div>
            <div class="comment-panel-content">
                <div class="comment-panel-content-item">
                    <div class="comment-author">{{ p.user.username }}</div>
                    <div>{{ p.created_time }}</div>
                </div>
                <div class="comment-panel-content-main">{{ p.content }}</div>
            </div>
            <span class="clearfix"></span>
            <div class="text-primary"><a href="">回复</a></div>
        </div>
    {% endfor %}


                <div class="comment-panel">
                    <div class="comment-panel-portrait">
                        <img src="{% static 'img/portrait.png' %}" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="comment-panel-content" >
                        <div class="comment-panel-content-item">
                            <div class="comment-author">wjmyly7336064</div>
                            <div>2017-10-01 18:00</div>
                        </div>
                        <div class="comment-panel-content-main">相当实用，赞美了</div>
                        <!--comment-secondary-panel-->
                        <div class="comment-secondary-panel">
                            <span class="triangle-icon"><i class="fa fa-sort-asc" aria-hidden="true"></i></span>
                            <div class="comment-panel-content">
                                <div class="comment-panel-content-item">
                                    <div class="comment-author">橘大佬</div>
                                    <div>2017-10-01 18:00</div>
                                </div>
                                <div class="comment-panel-content-main">就是有些细节再到位点就好了…</div>
                            </div>
                            <span class="clearfix"></span>
                        </div>
                        <!---->
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-primary"><a href="">回复</a></div>
                </div>

            </div>

        </div>



    <div class="col-md-3 cl-right">
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">个人微信号</div>
                    <div class="cl-code">
                        <img src="{% static 'img/y.jpg' %}" class="img-fluid" alt="">
                        <p>了解请加微信 谢谢</p>
                    </div>

                </div>
            </div>

        <div class="right-card">
                <div class="right-card-main">
                    <div class="right-card-title">最新文章</div>
                    <ul class="right-recommended-list">
                        {% for i in nwe %}
                            <li><a href="{% url 'home:detail' %}?art_id={{ i.id }}"><i class="fa fa-angle-right" aria-hidden="true"></i>{{ i.title }}</a></li>

                        {% endfor %}


                    </ul>
                </div>
            </div>
{% endblock %}
{% block js %}
    <script src="{% static 'jquery/jquery.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'highlight/highlight.pack.js' %}"></script>
    <script src="{% static 'vue/vue-2.5.16.js' %}"></script>
    <script src="{% static 'js/host.js' %}"></script>
    <script src="{% static 'vue/axios-0.18.0.min.js' %}"></script>
    <script src="{% static 'js/common.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
    <script>hljs.initHighlightingOnLoad();</script>
{% endblock %}
